<section ng-init="$ctrl.init()">
    <div  ng-repeat="msg in $ctrl.messages">
        <ul class="row">
            <li class="col-sm-12" ng-class="{ 'message-right': msg.connection.id == $ctrl.user.connection.id , 
                'message-left': msg.connection.id != $ctrl.user.connection.id }">
                <div class="message-avatar">
                    <img class="avatar" ng-src="{{msg.connection.avatar}}">
                </div>
                <div class="name">{{msg.connection.name}}</div>
                <div class="message-text">{{msg.content}}</div>
                <div class="message-hour">{{msg.createdDate | utcToLocal:"dd.MM.yyyy hh:mm:ss"}}<span
                        class="ion-android-done-all"></span></div>
            </li>
        </ul>
    </div>
    <div class="row">
        <div class="col-md-8">
            <textarea id="message" class="msgContent" minlength="1" placeholder="message" ng-enter="$ctrl.sendMessage()"
                ng-model="$ctrl.message.content"></textarea>
            <button class="sendMsgBtn" ng-click="$ctrl.sendMessage()"><i class="fas fa-paper-plane"></i></button>
        </div>
        <div class="col-md-4">
            <ul>
                <li ng-repeat="m in $ctrl.members">
                    <img imageonload ng-src="{{m.avatar}}" /> <span ng-bind="m.name"></span>
                </li>
            </ul>
        </div>
    </div>    
</section>
<!-- /.content -->